<script setup lang="ts">
import $mitt from '@/common/emitter'
import { INJECT_THEME_COLOR } from '@/common/provideType'
import type { DialogConfigType } from '@/components/dialogType'

const THEME_COLOR = inject(INJECT_THEME_COLOR)
const dialogConfig: DialogConfigType = reactive({
	dialogVisible: false,
	title: '温馨提示',
	width: 1040,
	row: {},
	dialoFootFlag: true
})

// 对外提供打开弹窗方法
const exposeOpenDialogCommonFn = (dialogConfigParams: DialogConfigType) => Object.assign(dialogConfig, dialogConfigParams)
// 对外提供关闭弹窗方法
const exposeCloseDialogCommonFn = () => handleCloseFn()

// 确认按钮方法
const handleSubmitFn = () => $mitt.emit('DIALOG_SUBMIT_EVENT')
const handleCloseFn = () => dialogConfig.dialogVisible = false

defineExpose({
    exposeOpenDialogCommonFn,
	exposeCloseDialogCommonFn
})
</script>

<template>
	<el-dialog
		v-model="dialogConfig.dialogVisible" 
		:title="dialogConfig.title" 
		:width="dialogConfig.width ? dialogConfig.width : '800'" 
		:before-close="handleCloseFn" 
		destroy-on-close 
		draggable 
	>
		<div>
			<slot />
		</div>

		<template #footer v-if="dialogConfig.dialoFootFlag">
			<span class="dialog-footer">
				<el-button class="btn btn-lg" @click="handleCloseFn">
					取 消
				</el-button>
				<el-button type="primary" :class="[`btn btn-lg btn-${THEME_COLOR}`]" @click="handleSubmitFn">
					确 定
				</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-form) {
	label.el-form-item__label {
		display: inline-block;
		text-indent: 0;
		text-align: right;
	}

	textarea {
		margin-bottom: .1rem;
		height: 2rem;
	}
}
</style>